<template>
  <el-row>
    <el-col>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="全场能耗" name="1">
          <el-row>
            <el-col :span="24" class="toolbar">
              <el-card>
                <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间">
                </el-date-picker>

                <el-select v-model="form.val" placeholder="选择类型">
                  <el-option label="指标1" value="1">
                  </el-option>
                  <el-option label="指标1" value="2">
                  </el-option>
                </el-select>

                <el-button type="primary">确定</el-button>
              </el-card>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-card class="card-tips">
                <h4 class="c-t-title">总能耗</h4>
                <div class="c-t-ct" style="color:#20A0FF;">18.76 万元</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="card-tips">
                <h4 class="c-t-title">预警指标</h4>
                <div class="c-t-ct" style="color:#FF4949;">天然气： 56.87 万立方</div>
              </el-card>

            </el-col>
            <el-col :span="6">
              <el-card class="card-tips">
                <h4 class="c-t-title">水量</h4>
                <div class="c-t-ct" style="color:#13CE66;">16.98 吨</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="card-tips">
                <h4 class="c-t-title">电能</h4>
                <div class="c-t-ct" style="color:#13CE66;">18.97 千瓦</div>
              </el-card>
            </el-col>
          </el-row>

          <el-row>
            <el-row>
              <el-col :span="16">
                <el-card class="charts-card">
                  <img src="../../assets/hj/cq2.jpg" alt="" style="width: 100%; height:700px;">
                </el-card>
              </el-col>
              <el-col :span="8">

                <el-row>
                  <el-col :span="24">
                    <el-card class="charts-card">
                      <el-table :data="tableData_1_1" style="width: 100%">
                        <el-table-column prop="ly" label="">
                        </el-table-column>
                        <el-table-column prop="a" label="厂区A"></el-table-column>
                        <el-table-column prop="b" label="厂区B"></el-table-column>
                        <el-table-column prop="c" label="厂区C"></el-table-column>
                      </el-table>
                    </el-card>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-card class="charts-card">
                      <div id="chart_a1_1_1" style="width:100%; height:230px;"></div>
                    </el-card>

                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-card class="charts-card">
                      <div id="chart_a1_1_2" style="width:100%; height:250px;"></div>
                    </el-card>

                  </el-col>
                </el-row>
              </el-col>
            </el-row>

          </el-row>
        </el-tab-pane>

        <el-tab-pane label="系统能耗" name="2">
          <el-row>
            <el-col :span="24" class="toolbar">
              <el-card>
                <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间">
                </el-date-picker>

                <el-select v-model="form.val" placeholder="选择类型">
                  <el-option label="指标1" value="1">
                  </el-option>
                  <el-option label="指标1" value="2">
                  </el-option>
                </el-select>

                <el-button type="primary">确定</el-button>
              </el-card>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-card class="card-tips">
                <h4 class="c-t-title">总能耗</h4>
                <div class="c-t-ct" style="color:#20A0FF;">18.76 万元</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="card-tips">
                <h4 class="c-t-title">预警指标</h4>
                <div class="c-t-ct" style="color:#FF4949;">天然气： 56.87 万立方</div>
              </el-card>

            </el-col>
            <el-col :span="6">
              <el-card class="card-tips">
                <h4 class="c-t-title">水量</h4>
                <div class="c-t-ct" style="color:#13CE66;">16.98 吨</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="card-tips">
                <h4 class="c-t-title">电能</h4>
                <div class="c-t-ct" style="color:#13CE66;">18.97 千瓦</div>
              </el-card>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-card class="charts-card">
                <img src="../../assets/hj/xitong.png" alt="" style="width: 100%; height:650px;">
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-col :span="24">
                <el-card class="charts-card">
                  <div id="chart_a1_2_1" style="width:100%; height:300px;"></div>
                </el-card>
              </el-col>
              <el-col :span="24">
                <el-card class="charts-card">
                  <div id="chart_a1_2_2" style="width:100%; height:300px;"></div>
                </el-card>
              </el-col>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-card class="charts-card">
                <div id="chart_a1_2_3" style="width:100%; height:300px;"></div>
              </el-card>
            </el-col>
          </el-row>

        </el-tab-pane>

        <el-tab-pane label="设备能耗" name="3">
          <el-row>
            <el-col :span="24" class="toolbar">
              <el-card>
                <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间">
                </el-date-picker>

                <el-select v-model="form.val" placeholder="选择类型">
                  <el-option label="指标1" value="1">
                  </el-option>
                  <el-option label="指标1" value="2">
                  </el-option>
                </el-select>

                <el-button type="primary">确定</el-button>
              </el-card>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="16">
              <el-row>
                <el-col :span="24">
                  <el-card class="charts-card">
                    <el-row>
                      <el-col :span="24">
                        <el-table :data="tableData_3_1" style="width: 100%">
                          <el-table-column prop="date" label="参数名称"></el-table-column>
                          <el-table-column prop="time" label="参数值"></el-table-column>
                          <el-table-column prop="date" label="参数名称"></el-table-column>
                          <el-table-column prop="time" label="参数值"></el-table-column>
                          <el-table-column prop="date" label="参数名称"></el-table-column>
                          <el-table-column prop="time" label="参数值"></el-table-column>
                        </el-table>
                      </el-col>
                      <el-col :span="24">
                        <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                        </el-pagination>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
                <el-col :span="24">
                  <el-card class="charts-card">
                    <el-row style="margin-bottom: 10px;">
                      <el-col :span="24">
                        <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                        </el-input>
                        <el-button type="primary">搜索</el-button>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-table :data="tableData_3_2" border style="width: 100%">
                          <el-table-column prop="name" label="功能名称"></el-table-column>
                          <el-table-column prop="qy" label="能耗"></el-table-column>
                          <el-table-column prop="v" label="速度(km/h)"></el-table-column>
                          <el-table-column prop="an" label="安全系数(%)"></el-table-column>
                          <el-table-column prop="z" label="温度"></el-table-column>
                          <el-table-column label="状态">
                            <template scope="scope">
                              <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                              </el-switch>
                            </template>
                          </el-table-column>
                          <el-table-column label="健康" width="180">
                            <template scope="scope">
                              <el-rate v-model="scope.row.tj" disabled show-text text-color="#ff9900">
                              </el-rate>
                            </template>
                          </el-table-column>
                          <el-table-column label="操作" width="150">
                            <template scope="scope">
                              <el-button type="text" size="small">查看</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-col>
                      <el-col :span="24">
                        <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                        </el-pagination>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-card class="charts-card">
                <div id="chart_a1_3_1" style="width:100%; height:230px;"></div>
              </el-card>
              <el-card class="charts-card">
                <div id="chart_a1_3_2" style="width:100%; height:230px;"></div>
              </el-card>
              <el-card class="charts-card">
                <div id="chart_a1_3_3" style="width:100%; height:230px;"></div>
              </el-card>
            </el-col>
          </el-row>

        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      form: {},
      activeName: '1',
      tableData_1_1: [{
        ly: '电能(kw*h)',
        a: 232,
        b: 112,
        c: 123
      }, {
        ly: '水量(t)',
        a: 32,
        b: 12,
        c: 23
      }],
      tableData_3_1: [{
        date: '电能',
        time: '126kw',
      }, {
        date: '水',
        time: '23t',
      }, {
        date: '氢气',
        time: '398m³',
      }, {
        date: '天然气',
        time: '398m³',
      }, {
        date: '氩气',
        time: '398m³',
      }, {
        date: '氩气',
        time: '398m³',
      }],
      tableData_3_2: [{
        name: '功能A',
        qy: '89',
        v: '80',
        an: '95.89',
        z: '30',
        tj: 3.5,
        status: '100',
      }, {
        name: '功能A',
        qy: '89',
        v: '80',
        an: '95.89',
        z: '30',
        tj: 3.5,
        status: '100',
      }, {
        name: '功能A',
        qy: '89',
        v: '80',
        an: '95.89',
        z: '30',
        tj: 4.5,
        status: '100',
      }, {
        name: '功能A',
        qy: '89',
        v: '80',
        an: '95.89',
        z: '30',
        tj: 1.5,
        status: '100',
      }, {
        name: '功能A',
        qy: '89',
        v: '80',
        an: '95.89',
        z: '30',
        tj: 2.5,
        status: '100',
      }],

      chart_a1_1_1: null,
      chart_a1_1_2: null,

      chart_a1_2_1: null,
      chart_a1_2_2: null,
      chart_a1_2_3: null,

      chart_a1_3_1: null,
      chart_a1_3_2: null,
      chart_a1_3_3: null,
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    drawChart_a1_1_1() {
      let dom = document.getElementById('chart_a1_1_1')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart_a1_1_1 = echarts.init(dom);

      this.chart_a1_1_1.setOption({
        title: {
          text: '能耗同比与环比'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['同比', '环比']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '同比',
            type: 'line',
            data: [12.0, 13.2, 10.1, 13.4, 25, 23.0, 21.0]
          },
          {
            name: '环比',
            type: 'line',
            data: [22.0, 18.2, 19.1, 23.4, 29.0, 33.0, 31.0]
          },
        ]
      });
    },
    drawChart_a1_1_2() {
      let dom = document.getElementById('chart_a1_1_2')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart_a1_1_2 = echarts.init(dom);

      this.chart_a1_1_2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },

        legend: {
          data: ['电', '水', '天然气', '氨气']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量',
            min: 0,
            max: 250,
            position: 'right',
            axisLabel: {
              formatter: '{value} kw'
            }
          },
          {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            position: 'right',
            offset: 80,
            axisLabel: {
              formatter: '{value} t'
            }
          },
          {
            type: 'value',
            name: '体积',
            min: 0,
            max: 25,
            position: 'left',
            axisLabel: {
              formatter: '{value} ml'
            }
          }
        ],
        series: [
          {
            name: '电',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '水',
            type: 'bar',
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '天然气',
            type: 'bar',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
          {
            name: '氨气',
            type: 'bar',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
        ]
      });
    },

    drawChart_a1_2_1() {
      let dom = document.getElementById('chart_a1_2_1')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart_a1_2_1 = echarts.init(dom);

      this.chart_a1_2_1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },

        legend: {
          data: ['电', '水', '天然气', '氨气']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['系统A', '系统B', '系统C', '系统D', '系统E', '系统F']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量',
            min: 0,
            max: 250,
            position: 'right',
            axisLabel: {
              formatter: '{value} kw'
            }
          },
          {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            position: 'right',
            offset: 80,
            axisLabel: {
              formatter: '{value} t'
            }
          },
          {
            type: 'value',
            name: '体积',
            min: 0,
            max: 25,
            position: 'left',
            axisLabel: {
              formatter: '{value} ml'
            }
          }
        ],
        series: [
          {
            name: '电',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
          },
          {
            name: '水',
            type: 'bar',
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
          },
          {
            name: '天然气',
            type: 'bar',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
          },
          {
            name: '氨气',
            type: 'bar',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
          },
        ]
      });
    },
    drawChart_a1_2_2() {
      let dom = document.getElementById('chart_a1_2_2')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart_a1_2_2 = echarts.init(dom);

      this.chart_a1_2_2.setOption({
        title: {
          text: '能源占比',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['电能', '天然气', '热力', '纯水', '氨气', '氧气', '氢气', '氩气']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 1548, name: '电能' },
              { value: 335, name: '天然气' },
              { value: 310, name: '热力' },
              { value: 234, name: '纯水' },
              { value: 15, name: '氨气' },
              { value: 10, name: '氧气' },
              { value: 30, name: '氢气' },
              { value: 10, name: '氩气' },

            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    drawChart_a1_2_3() {
      let dom = document.getElementById('chart_a1_2_3')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart_a1_2_3 = echarts.init(dom);

      this.chart_a1_2_3.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },

        legend: {
          data: ['电', '水', '天然气', '氨气']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量',
            min: 0,
            max: 250,
            position: 'right',
            axisLabel: {
              formatter: '{value} kw'
            }
          },
          {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            position: 'right',
            offset: 80,
            axisLabel: {
              formatter: '{value} t'
            }
          },
          {
            type: 'value',
            name: '体积',
            min: 0,
            max: 25,
            position: 'left',
            axisLabel: {
              formatter: '{value} ml'
            }
          }
        ],
        series: [
          {
            name: '电',
            type: 'line',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '水',
            type: 'line',
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '天然气',
            type: 'line',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
          {
            name: '氨气',
            type: 'line',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            markLine: {
              lineStyle: {
                normal: {
                  type: 'solid',
                  color: 'rgb(180, 180, 180)'
                }
              },
              data: [{
                xAxis: '6月'
              }]
            }
          },
        ]
      });
    },

    drawChart_a1_3_1() {
      let dom = document.getElementById('chart_a1_3_1')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart_a1_3_1 = echarts.init(dom);

      this.chart_a1_3_1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },

        legend: {
          data: ['电', '水', '天然气', '氨气']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6', '设备7', '设备8', '设备9', '设备10', '设备11', '设备12']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量',
            min: 0,
            max: 250,
            position: 'right',
            axisLabel: {
              formatter: '{value} kw'
            }
          },
          {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            position: 'right',
            offset: 80,
            axisLabel: {
              formatter: '{value} t'
            }
          },
          {
            type: 'value',
            name: '体积',
            min: 0,
            max: 25,
            position: 'left',
            axisLabel: {
              formatter: '{value} ml'
            }
          }
        ],
        series: [
          {
            name: '电',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '水',
            type: 'bar',
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '天然气',
            type: 'bar',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
          {
            name: '氨气',
            type: 'bar',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
        ]
      });
    },
    drawChart_a1_3_2() {
      let dom = document.getElementById('chart_a1_3_2')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart_a1_3_2 = echarts.init(dom);

      this.chart_a1_3_2.setOption({
        title: {
          text: '能源占比',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['电能', '天然气', '热力', '纯水', '氨气', '氧气', '氢气', '氩气']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 1548, name: '电能' },
              { value: 335, name: '天然气' },
              { value: 310, name: '热力' },
              { value: 234, name: '纯水' },
              { value: 15, name: '氨气' },
              { value: 10, name: '氧气' },
              { value: 30, name: '氢气' },
              { value: 10, name: '氩气' },

            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    drawChart_a1_3_3() {
      let dom = document.getElementById('chart_a1_3_3')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart_a1_3_3 = echarts.init(dom);

      this.chart_a1_3_3.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },

        legend: {
          data: ['电', '水', '天然气', '氨气']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量',
            min: 0,
            max: 250,
            position: 'right',
            axisLabel: {
              formatter: '{value} kw'
            }
          },
          {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            position: 'right',
            offset: 80,
            axisLabel: {
              formatter: '{value} t'
            }
          },
          {
            type: 'value',
            name: '体积',
            min: 0,
            max: 25,
            position: 'left',
            axisLabel: {
              formatter: '{value} ml'
            }
          }
        ],
        series: [
          {
            name: '电',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '水',
            type: 'bar',
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '天然气',
            type: 'bar',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
          {
            name: '氨气',
            type: 'bar',
            yAxisIndex: 2,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
        ]
      });
    },
    // 绘制
    drawCharts() {
      switch (this.activeName) {
        case '1':
          this.drawChart_a1_1_1()
          this.drawChart_a1_1_2()
          break;
        case '2':
          this.drawChart_a1_2_1()
          this.drawChart_a1_2_2()
          this.drawChart_a1_2_3()
          break;
        case '3':
          this.drawChart_a1_3_1()
          this.drawChart_a1_3_2()
          this.drawChart_a1_3_3()
          break;
        default:
          break
      }
    },
    // 刷新
    resizeAllChart() {
      switch (this.activeName) {
        case '1':
          this.chart_a1_1_1.resize()
          this.chart_a1_1_2.resize()
          break;
        case '2':
          this.chart_a1_2_1.resize()
          this.chart_a1_2_2.resize()
          this.chart_a1_2_3.resize()

          break;
        case '3':
          this.chart_a1_3_1.resize()
          this.chart_a1_3_2.resize()
          this.chart_a1_3_3.resize()
          break;
        default:
          break
      }

    }
  },
  mounted() {
    console.log('mounted')
    this.drawCharts()
    this.$nextTick(() => {
      window.onresize = this.resizeAllChart
    })
  },
  updated() {
    console.log('updated')
    this.drawCharts()
    this.resizeAllChart()
  }
}
</script>

<style scoped>

</style>